<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | Invoice</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="${pageContext.request.contextPath}/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="${pageContext.request.contextPath}/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.${pageContext.request.contextPath}/resources/js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			Invoice <small>#007612</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">Examples</a></li>
			<li class="active">Blank page</li>
		</ol>
	</section>

	<div class="pad margin no-print">
		<div class="alert alert-info" style="margin-bottom: 0 !important;">
			<i class="fa fa-info"></i> <b>Note:</b> This page has been enhanced
			for printing. Click the print button at the bottom of the invoice to
			test.
		</div>
	</div>

	<!-- Main content -->
	<section class="content invoice">
		<!-- title row -->
		<div class="row">
			<div class="col-xs-12">
				<h2 class="page-header">
					<i class="fa fa-globe"></i> AdminLTE, Inc. <small
						class="pull-right">Date: 2/10/2014</small>
				</h2>
			</div>
			<!-- /.col -->
		</div>
		<!-- info row -->
		<div class="row invoice-info">
			<div class="col-sm-4 invoice-col">
				From
				<address>
					<strong>Admin, Inc.</strong><br> 795 Folsom Ave, Suite 600<br>
					San Francisco, CA 94107<br> Phone: (804) 123-5432<br /> Email:
					info@almasaeedstudio.com
				</address>
			</div>
			<!-- /.col -->
			<div class="col-sm-4 invoice-col">
				To
				<address>
					<strong>John Doe</strong><br> 795 Folsom Ave, Suite 600<br>
					San Francisco, CA 94107<br> Phone: (555) 539-1037<br /> Email:
					john.doe@example.com
				</address>
			</div>
			<!-- /.col -->
			<div class="col-sm-4 invoice-col">
				<b>Invoice #007612</b><br /> <br /> <b>Order ID:</b> 4F3S8J<br /> <b>Payment
					Due:</b> 2/22/2014<br /> <b>Account:</b> 968-34567
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<!-- Table row -->
		<div class="row">
			<div class="col-xs-12 table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Qty</th>
							<th>Product</th>
							<th>Serial #</th>
							<th>Description</th>
							<th>Subtotal</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Call of Duty</td>
							<td>455-981-221</td>
							<td>El snort testosterone trophy driving gloves handsome</td>
							<td>$64.50</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Need for Speed IV</td>
							<td>247-925-726</td>
							<td>Wes Anderson umami biodiesel</td>
							<td>$50.00</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Monsters DVD</td>
							<td>735-845-642</td>
							<td>Terry Richardson helvetica tousled street art master</td>
							<td>$10.70</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Grown Ups Blue Ray</td>
							<td>422-568-642</td>
							<td>Tousled lomo letterpress</td>
							<td>$25.99</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<div class="row">
			<!-- accepted payments column -->
			<div class="col-xs-6">
				<p class="lead">Payment Methods:</p>
				<img
					src="${pageContext.request.contextPath}/resources/img/credit/visa.png"
					alt="Visa" /> <img
					src="${pageContext.request.contextPath}/resources/img/credit/mastercard.png"
					alt="Mastercard" /> <img
					src="${pageContext.request.contextPath}/resources/img/credit/american-express.png"
					alt="American Express" /> <img
					src="${pageContext.request.contextPath}/resources/img/credit/paypal2.png"
					alt="Paypal" />
				<p class="text-muted well well-sm no-shadow"
					style="margin-top: 10px;">Etsy doostang zoodles disqus groupon
					greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg
					dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.</p>
			</div>
			<!-- /.col -->
			<div class="col-xs-6">
				<p class="lead">Amount Due 2/22/2014</p>
				<div class="table-responsive">
					<table class="table">
						<tr>
							<th style="width: 50%">Subtotal:</th>
							<td>$250.30</td>
						</tr>
						<tr>
							<th>Tax (9.3%)</th>
							<td>$10.34</td>
						</tr>
						<tr>
							<th>Shipping:</th>
							<td>$5.80</td>
						</tr>
						<tr>
							<th>Total:</th>
							<td>$265.24</td>
						</tr>
					</table>
				</div>
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<!-- this row will not appear when printing -->
		<div class="row no-print">
			<div class="col-xs-12">
				<button class="btn btn-default" onclick="window.print();">
					<i class="fa fa-print"></i> Print
				</button>
				<button class="btn btn-success pull-right">
					<i class="fa fa-credit-card"></i> Submit Payment
				</button>
				<button class="btn btn-primary pull-right"
					style="margin-right: 5px;">
					<i class="fa fa-download"></i> Generate PDF
				</button>
			</div>
		</div>
	</section>
	<!-- /.content -->



	<!-- jQuery 2.0.2 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
    </body>
</html>